<template>
    <el-card class="card_box">
        <div class="basic-flex">
            <div class="font-medium title">
                用户画像概览
            </div>
            <div class="circle-border" @click="showSimple=!showSimple">
                <el-icon v-show="!showSimple"><ArrowUp /></el-icon>
                <el-icon v-show="showSimple"><ArrowDown /></el-icon>
            </div>
                
        </div>
        <el-divider class="divider"></el-divider>
        <el-row v-show="showSimple">
            <el-col :span="4"> 
                <img style="height:100%" :src="userInfo.user_gender=='女'?getAssetsFile('images/users/woman.svg'):getAssetsFile('images/users/man.svg')" />
            </el-col>
            <el-col :span="3" >
                <div class="bottom-style">
                    <div><text>姓名：</text>{{ userInfo.user_name }} <img style="height:14px;bottom:0" :src="userType=='个人用户'?getAssetsFile('images/users/userIcon.svg'):getAssetsFile('images/users/vipUserIcon.svg')"/></div>
                    <div><text>年龄：</text>{{ userInfo.user_age }}</div>
                </div>
                
            </el-col>
            <el-col :span="6">
                <div class="bottom-style">
                    <div><text>手机号：</text>{{ userInfo.user_phone }}</div>
                    <div><text>身份证号：</text>{{ idCard(userInfo.id_card) }}</div>
                </div>
               
            </el-col>
            <el-col :span="11">
                <div class="bottom-style">
                    <div><text>订单状态：</text>{{ userInfo.order_status?orderStatus[userInfo.order_status].text: '' }}</div>
                    <div><text>首次取电：</text>{{ formatTime(userInfo.first_br_battery_time) }} {{ userInfo.first_br_battery_area}}</div>
                    <div><text>退电：</text>{{ formatTime(userInfo.last_rm_battery_time) }} {{ userInfo.last_rm_battery_area }}</div>
                </div>
                
            </el-col>
        </el-row>
        <div class="simple-info" v-show="!showSimple">
            <div><text>姓名：</text>{{ userInfo.user_name }}</div>
            <div><text>手机号:</text>{{ userInfo.user_phone }}</div>
            <div><text>身份证号：</text>{{ idCard(userInfo.id_card) }}</div>
            <div><text>首次站点：</text>{{ userInfo.first_br_battery_area}}</div>
            <div><text>订单状态：</text>{{ userInfo.order_status?orderStatus[userInfo.order_status].text: '' }}</div>
        </div>
    </el-card>
    <el-card class="card_box">
        <div class="font-medium title">功能区</div>
        <el-divider class="divider"></el-divider>
        <div class="simple-info tab-style" >
            <div v-for="item in tabList" :key="item.title" class="title-style" :class="activeName ==item.value?'selected-title':'unselected-title'" @click="changeTitle({title:item.title,value:item.value})">{{ item.title }}</div>
        </div>
    </el-card>
    <el-card>
        <component :is="tab[activeName]"></component>
    
       
    </el-card>
</template>
<script setup lang="ts">
import "@/style/modules/users.scss";
import {getAssetsFile} from "@/utils";
import {getUserDetailPath} from '@/config/paths';
import {orderStatus,idCard} from "@/utils/users/pubConfig";
import orders from "@/views/user/components/orders/index.vue"
import exchanges from "@/views/user/components/exchanges/index.vue";
import { useRoute } from 'vue-router';
const route = useRoute();
interface User{
    user_name:string,
    user_age:number,
    user_phone:string,
    order_status:number,
    first_br_battery_time:string,
    first_br_battery_area:string,
    last_rm_battery_time:string,
    last_rm_battery_area:string
}
const showSimple=ref<boolean>(true)
const userId=ref<string>('')
const userInfo=ref<User>({
    user_name:'',
    user_age:0,
    user_phone:'',
    order_status:0,
    first_br_battery_time:'',
    first_br_battery_area:'',
    last_rm_battery_time:'',
    last_rm_battery_area:''
})
const tab={
    orders,
    exchanges
}
const userType=ref<strng>('')
const tabList=ref<{title:string,value?:string}[]>([{
    title:'缴费订单',value:'orders'
},{
    title:'换电',value:'exchanges'
},{
    title:'首绑',
},{
    title:'退押'
},{
    title:'延期'
},{
    title:'借/退/冻结'
},{
    title:'逾期扣款'
},{
    title:'沟通'
},{
    title:'优惠券'
},{
    title:'拉新结算'
}
])
const formatTime=computed(()=>{
    return (value)=>{
        if(!value){
            return ''
        }
        return dayjs(value).format('YYYY-MM-DD')
    }
})
const userOrderList=ref<{title:string,value:number,span:number}[]>([{
    title:'累计购买',value:5,span:3
},
{
    title:'使用天数',value:5,span:3
}])
const activeName=ref<string>('orders')
onMounted(()=>{
    const {id,type}=route.query
    // console.log('route',route.query)
    userId.value=id
    userType.value=type
    getInfo()
})
async function getInfo() {
    userInfo.value={}
    const {data}=await baseRequest.post(getUserDetailPath.value,{user_id:Number(userId.value)})
    userInfo.value=data
    console.log('data',data)
}
function changeTitle({title,value}){
    activeName.value=value
}

</script>
<style scoped lang="scss">
.bottom-style{
    bottom:0;
    position: absolute;
    text{
       color:#999999;
       width:70px;
       display: inline-block;
        text-align: justify;
        text-align-last: justify;
    };
    div:not(:first-child){
        padding-top:14px
    }
}
.simple-info{
    width:100%;
    display:flex;
    justify-content:space-between;
    text{
       color:#999999;
       
    };
}
.circle-border{
  border:1px solid black;
  border-radius:100%;
  width:12px;
  height:12px;
  text-align:center
}
.circle-border:hover{
    cursor:pointer;
}
.divider{
    margin:9px 0;
}
.tab-style{
    border-radius: 2px;
    color:#999999;
    text-align:center;
    div{
       
        padding:3px 0 3px 0;
    };
   
}
.selected-title{
    color:#ffffff;
    background-color: #366EF4;
    border: 2px solid #366EF4;
}
.unselected-title{
    border:1px solid #D6D6D6 ;
}
.title-style{
    width:100%
}
.title-style:hover{
    cursor:pointer
}
</style>